import styles from "./index.module.less";
import { Avatar, Dropdown, Space } from "antd";
import { useSelector } from "@/store/hooks";
import { UserOutlined } from "@ant-design/icons";
import { useGlobalActionFunction } from "@/store/modules/global";
import { useAuthActionFunction } from "@/store/modules/auth";
import { logout } from "@/api/modules/user";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import { useNavigate } from "react-router-dom";

export default () => {
	const { currentUser } = useSelector(state => state.auth);
	const setToken = useGlobalActionFunction("setToken");
	const setCurrentUser = useAuthActionFunction("setCurrentUser");
	const navigate = useNavigate();

	const items = [
		{
			key: "1",
			label: <a>退出登录</a>
		}
	];

	const handleAction = ({ key }: any) => {
		switch (key) {
			case "1":
				// 退出登录
				logout().then(res => {
					if (res?.code === RESULT_CODES.SUCCESS) {
						setToken("");
						setCurrentUser({});
						navigate("/user/login");
					}
				});
				break;
			default:
				break;
		}
	};

	const handleGoDashboard = () => {
		navigate("/monitor/dashboard")
	}

	return (
		<div className={styles.container}>
			<div className={styles.left}>
				<h1 className={styles.logo_wrap} onClick={handleGoDashboard}>
					<img src={"/logo.png"} alt={"logo"} />
				</h1>
				<div className={styles.enterprise_name}>智能调度平台</div>
			</div>
			<Dropdown menu={{ items, onClick: handleAction }} placement="bottom">
				<Space size={5}>
					<Avatar size="large" icon={<UserOutlined />} />
					<span>{currentUser?.userName}</span>
				</Space>
			</Dropdown>
		</div>
	);
};
